<template>
  <div>
    <!-- 卡片视图区域 -->
    <!-- <el-row :gutter="32">
      <el-col class="first" :xs="24" :sm="24" :lg="17">
        <div class="chart-wrapper">
          <el-card>
            <el-carousel :interval="4000" type="card" height="400px">
              <el-carousel-item v-for="item in url" :key="item">
                <el-image :src="item" fit="fill"></el-image>
              </el-carousel-item>
            </el-carousel>
            <el-upload
              class="upload-demo"
              action="http://localhost:8080/wlgloss/fileoss/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="handle_success"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
              style="margin-left:480px"
            >
              <el-button size="small" class="detail" style="margin-left:30px"
                >点击上传优秀员工</el-button
              >
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="7">
        <div class="chart-wrapper">
          <el-card class="last">
            <div id="bottom-right" style="width: 400px; height: 400px"></div>
          </el-card>
        </div>
      </el-col>
    </el-row> -->

    <el-row :gutter="32" class="second">
      <el-col class="first" :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card
            ><div id="main" style="width: 500px; height: 400px"></div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card
            ><div id="bottom-mid" style="width: 500px; height: 400px"></div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <el-card>
            <div id="top-right" style="width: 500px; height: 400px"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import home from '@/api/home';
export default {
  data() {
    var data = [];

    for (var i = 0; i <= 100; i++) {
      var theta = (i / 100) * 360;
      var r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
      data.push([r, theta]);
    }

    return {
      banner: { url: 'hhhh' },
      fileList: [],
      topRightData: [
        {
          value: 0
        },
        {
          value: 0,
          itemStyle: {
            color: '#a90000'
          }
        },
        {
          value: 0,
          itemStyle: {
            color: 'pink'
          }
        },
        {
          value: 0,
          itemStyle: {
            color: 'red'
          }
        },
        {
          value: 0,
          itemStyle: {
            color: 'orage'
          }
        },
        {
          value: 0,
          itemStyle: {
            color: 'yellow'
          }
        }
      ],
      OptionsTopRightData: [
        { value: 0, name: '锅电揽出' },
        { value: 0, name: '锅电揽入' },
        { value: 0, name: '铝电揽出' },
        { value: 0, name: '铝电揽入' }
      ],
      midData1: [150, 230, 224, 218, 135, 147, 260],
      midData2: [180, 280, 286, 186, 120, 100, 270],
      url: [],
      // 需要合并的数据
      options: {
        title: {
          text: '仓库容积'
        },
        tooltip: {},
        xAxis: {
          data: ['仓库1', '仓库2', '仓库3', '仓库4', '仓库5', '仓库6']
        },
        yAxis: {},
        series: [
          {
            name: '仓库容积',
            type: 'bar',
            data: null
          }
        ]
      },
      optionsTopRight: {
        title: {
          text: '电缆统计'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '电缆统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: null
          }
        ]
      },
      bottomMid: {
        title: {
          text: '线路统计'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: null,
            color: 'pink',
            type: 'line'
          },
          {
            data: null,
            color: 'rgb(207,74,66)',
            type: 'line'
          }
        ]
      },
      bottomRight: {
        title: {
          text: '心动指数'
        },
        legend: {
          data: ['line']
        },
        polar: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {},
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            color: 'pink',
            data: data
          }
        ]
      }
    };
  },
  created() {
    this.getBanner();
    this.getEchartsInit();
  },
  watch: {},
  mounted() {
    this.getBottomRight();
  },
  watch: {},
  methods: {
    getEchartsInit() {
      home.selectAllLeft().then(res => {
        const list = res.data.data.list;
        list.forEach((element, i) => {
          this.midData1[i] = element.v1;
          this.midData2[i] = element.v2;
        });
        this.getBottomMid();
      });
      home.selectAllMid().then(res => {
        const list = res.data.data.list;
        list.forEach((element, i) => {
          this.topRightData[i].value = element.value;
        });

        this.getInit();
      });
      home.selectAllRight().then(res => {
        this.OptionsTopRightData = res.data.data.list;
        this.getTopRight();
      });
    },
    getInit() {
      var myChart = echarts.init(document.getElementById('main'));
      this.options.series[0].data = this.topRightData;
      myChart.setOption(this.options);
    },
    getTopRight() {
      var myChart = echarts.init(document.getElementById('top-right'));
      this.optionsTopRight.series[0].data = this.OptionsTopRightData;
      myChart.setOption(this.optionsTopRight);
    },
    getBottomMid() {
      var myChart = echarts.init(document.getElementById('bottom-mid'));
      this.bottomMid.series[0].data = this.midData1;
      this.bottomMid.series[1].data = this.midData2;
      myChart.setOption(this.bottomMid);
    },
    getBottomRight() {
      var myChart = echarts.init(document.getElementById('bottom-right'));
      myChart.setOption(this.bottomRight);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    getBanner() {
      home.getListBanner().then(res => {
        this.url = [];
        for (const iterator of res.data.data.list) {
          this.url.push(iterator.url);
        }
      });
    },
    saveBanner() {
      home.saveBanner(this.banner).then(res => {});
    },
    handle_success(res) {
      this.banner.url = res.data.url;
      this.saveBanner();
      this.getBanner();
      this.$message.success('图片上传成功');
    }
  }
};
</script>

<style scoped>
.second {
  display: flex;
  flex-wrap: nowrap;
}
.el-row {
  margin-top: 20px;
}
div {
  border-radius: 10px;
}
.el-card {
  box-shadow: 0.1em 0.1em 0.3em #a09f9f;
}
.el-upload {
  margin-left: 200px;
}
.last {
  height: 510px;
}
</style>
